<template>
	<div class="edit-preview">
		<img
		 class="previewImg"
		 ref="image"
		 :src="previewImage" />
		<van-nav-bar
		  class="navbar"
		  left-text="取消"
		  right-text="确认"
		  @click-left="$emit('close')"
		  @click-right="confirmCropAvatar"
		/>
	</div>
</template>

<script>
	import 'cropperjs/dist/cropper.css';
	import Cropper from 'cropperjs';
	export default {
		name:"editPreview",
		data(){
			return {
				preview:this.previewImage,
				cropper:null
			}
		},
		mounted(){
			const image = this.$refs.image
			this.cropper = new Cropper(image,{
				viewMode: 1,
				dragMode: 'move',
				aspectRatio: 1,
				autoCropArea: 1,
				cropBoxMovable: false,
				cropBoxResizable: false,
				background: false,
				movable: true
				 
			})
		},
		props:['previewImage','file'],
		methods:{
		
			confirmCropAvatar(){
				this.cropper.getCroppedCanvas().toBlob((blob) =>{
					this.$emit('confirm',blob)
				})
			} 
			
		}
	}
</script>

<style scoped lang="less">
	.edit-preview{
		height:100%;
		background-color:#000;
		.previewImg{
			display:block;
			width:100%;
			vertical-align: middle;
		}
		/deep/ .van-nav-bar{
			
			background-color:#000;
			.van-nav-bar__text{
				color:#fff;
			}
		}
		.navbar{
			position:fixed;
			bottom:0;
			left:0;
			right:0;
			height:44px;
		}
	}
</style>
